<template>
  <div class="tw-librotatecarousel"
    :style="{maxWidth: maxWidth}">
    <carousel-3d :count="imageListResult.length"
      :controls-visible="controlsVisible"
      :width="parseInt(slideWidth)"
      :height="parseInt(slideHeight)"
      :autoplay="autoplayEnabled"
      :autoplayTimeout="autoplayTimeout"
      :disable3d="disable3d"
      :perspective="parseInt(perspective)"
      :border="parseInt(border)"
      :display="parseInt(display)"
      :space="parseInt(space)"
      :loop="loop"
      :animation-speed="animationSpeed"
      :oneDirectional="oneDirectional"
      :dir="direction"
      :start-index="parseInt(startIndex)"
      :inverse-scaling="parseInt(inverseScaling)"
      :clickable="clickable"
      @before-slide-change="onSlideChange"
      @last-slide="onLastSlide"
      v-if="imageListResult.length > 0"
      ref="slider">
      <slide v-for="(img, idx) in imageListResult"
        :index="idx"
        :key="idx">
        <a v-if="img.href"
          class="tw-librotatecarousel-imgbox"
          :href="img.href"
          :style="{backgroundColor: img.backgroundColor|'rgba(0,0,0,0)'}"
          :target="img.target || '_self'">
          <img class="tw-librotatecarousel-img"
            :style="{objectFit: objectFit}"
            :src="img.url" />
          <div v-if="imageTitleVisibal"
            class="tw-librotatecarousel-imgtitle">{{img.title}}</div>
        </a>
        <div v-else
          class="tw-librotatecarousel-imgbox"
          :style="{backgroundColor: img.backgroundColor|'rgba(0,0,0,0)'}">
          <img class="tw-librotatecarousel-img"
            :style="{objectFit: objectFit}"
            :src="img.url" />
          <div v-if="imageTitleVisibal"
            class="tw-librotatecarousel-imgtitle">{{img.title}}</div>
        </div>
        <div class="tw-librotatecarousel-cover"></div>
      </slide>
    </carousel-3d>
    <div class="tw-librotatecarousel-dots"
      v-if="dots">
      <div class="dot"
        v-for="(img, idx) in imageListResult"
        :index="idx"
        :key="idx"
        :class="n==idx?'xselected':''"
        @click="clickDot(idx)">
        <span>{{idx}}</span>
      </div>
    </div>

  </div>
</template>

<script>
import { Carousel3d, Slide } from 'vue-carousel-3d'
import props from './props'
import style from '../tw-lib-base/style'
import bannerMixins from '../tw-lib-base/banner-document/mixins'

export default {
  name: 'lib-rotate-carousel',

  mixins: [style, bannerMixins],

  props,

  components: {
    Carousel3d,
    Slide
  },

  data() {
    return {
      n: 0
    }
  },

  computed: {
    imageListResult() {
      let result = []

      if (this.dataIsFromPortal) {
        result = this.bannerDocuments.map(item => item)
      } else {
        result =
          this.imageListFromApi.length > 0
            ? this.imageListFromApi
            : this.imageListFromProp
        result = result.map(img => {
          img.url = this.$ui.genImagePath(img.localPath || img.url)
          return img
        })
      }

      if (result.length > 0) {
        // 当图片总数小于每屏显示的数量时，自动补全
        const len = result.length

        for (let i = len; i < this.display; i++) {
          result.push(result[(i - len) % len])
        }
      }

      return result
    },

    style() {
      return {
        color: this.color
      }
    }
  },

  created() {
    if (this.selfadapt) {
      let src = el.src
      let newImg = new Image()
      newImg.src = src
      newImg.onload = function() {
        this.selfAdaption()
      }
      window.onresize = () => {
        this.selfAdaption()
      }
    }
  },

  methods: {
    setStyle() {
      const style = `
        ::root.tw-libname {
          color: ${this.color};
        }
      `
      this.addStyle(style)
    },

    onSlideChange(index) {
      this.n = index
    },

    clickDot(idx) {
      this.n = idx
      this.$refs.slider.goSlide(idx)
    },

    selfAdaption() {
      const elOutWidth = document.querySelector('.tw-librotatecarousel')
        .clientWidth
      const dots = document.querySelector('.tw-librotatecarousel-dots')

      if (elOutWidth < 768) {
        this.disable3d = true
        dots.style.left = elOutWidth - 120 + 'px'
        dots.style.right = '0px'
      } else {
        this.disable3d = false
        let slideScale = this.slideHeight / this.slideWidth //高宽比例
        this.slideWidth = elOutWidth * 0.7
        this.slideHeight = slideScale * this.slideWidth //高随比例变化
        this.inverseScaling = elOutWidth * 0.1 //缩放
        this.perspective = 0
        dots.style.left = this.slideWidth + 15 + 'px'
        dots.style.right = '0px'
      }
    }
  }
}
</script>

<style lang="scss">
@import './css/index.scss';
</style>
